<template>
    <div>
        <el-container>
            <el-aside>
                <div class="pic">
                    <img src="../assets/loginBox.svg"/>
                </div>
                <div class="imgTitle">
                    欢迎使用动力云客系统
                </div>
            </el-aside>
            <el-main>
                <div class="formDiv">
                    <el-form 
                        :model="form" 
                        label-width="60px"
                        ref="formRef"
                        :rules="rules"
                    >
                        <div style="text-align: center; font-size: 20px;">
                            欢迎登陆
                        </div>
                        <el-form-item label="账号:" prop="loginAct">
                            <el-input v-model="form.loginAct" />
                        </el-form-item>
                        <el-form-item label="密码:" prop="loginPwd">
                            <el-input v-model="form.loginPwd" type="password"/>
                        </el-form-item>
                        <el-form-item label=" ">
                            <el-button type="primary" @click="submitForm(formRef)" style="width: 100%;">提交</el-button>
                        </el-form-item>
                        <el-form-item label=" ">
                            <el-checkbox v-model="form.rememberMe">记住我</el-checkbox>
                        </el-form-item>
                    </el-form>
                </div>
            </el-main>
        </el-container>
    </div>
</template>
<script lang="ts" setup name="LoginView">
import { reactive, ref } from "vue";
import type { FormInstance } from "element-plus";
import { ElMessage } from "element-plus";
import axios from "axios";
import router from "@/router";
import { baseService } from "@/utils/httpReqest";
import { useLoginUserStore } from "@/stores/loginUser";
import { LoginUser } from "@/hooks/LoginUser";

let loginUser = useLoginUserStore();

const formRef = ref();
const form = reactive({
    loginAct: "",
    loginPwd: "",
    rememberMe: false
})
const rules = reactive({
    loginAct: [
        { required: true, message: '请输入用户名', trigger: 'blur' }
    ],
    loginPwd: [
        { required: true, message: '请输入密码', trigger: 'blur' }
    ],
});

let loadButtonList = () => {
    baseService.doGet('/user/info').then(({ data }: any) => {
        let codeArr:string[] = [];
        for (const key in data.buttonList) {
            codeArr.push(data.buttonList[key].code)
        }
        localStorage.setItem("buttonListStr", codeArr.join(","))
    })
    console.log("出发");
}
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            // 因为后端登陆是用springsecurity进行管理，所以必须以表单形式进行提交
            // 用jso格式提交 后端接受不到。
            axios.post("http://localhost:8080/api/login", form, {
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            }).then(({ data }) => {
                if (data.code == 200) {
                    ElMessage({
                        message: '登陆成功',
                        type: 'success',
                        plain: true,
                    })
                    // 登陆成功后 将jwt保存到 localstorage
                    localStorage.setItem("token", data.data.token)
                    loadButtonList();
                    router.push('/dashboard');
                } else {
                    ElMessage.error({
                        message: "登陆失败，账号或者密码错误"
                    })

                    // router.push('/dashboard');
                }
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}
</script>
<style scoped>
.el-aside {
    width: 40%;
    height: calc(100vh);
    background-color: #725960;
    display: flex;
    flex-direction: column;
}

.pic {
    height: 50%;
    display: flex;
    justify-content: center;

}

.imgTitle {
    color: aliceblue;
    font-size: 28px;
    text-align: center;
}

.el-main {
    display: flex;
    justify-content: center;
    align-items: center;
}

.el-input {
    width: 300px;
}

.el-form-item {
    margin-right: 30px;
    margin-top: 20px;
}

.formDiv {
    padding: 40px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-content: center;
    box-sizing: border-box;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
</style>